<template>
	<div class="section-title">
		<img :src="img">
		<span :class="color">{{title}}</span>
	</div>
</template>
<script>
import hot from '@/assets/img/home/hot.png'
import recommend from '@/assets/img/home/recommend.png'
export default{
	name:'SectionTitle',
	data(){
		return {
			img:'',
			title: '',
			color: ''
		}
	},
	mounted(){
		switch(this.type) {
			case 'recommend':
				this.img = recommend;
				this.title = '官方推荐';
				this.color = 'yellow';
				break;
			case 'hot' :
				this.img = hot;
				this.title = '热销产品';
				this.color = 'orange';
				break;
		}
	},
	props:['type']
}
</script>
<style lang='less' scoped>
.section-title{
	margin: .2rem 0;
	width: 100%;
	text-align: center;
	img{
		margin-right: .1rem;
		vertical-align: middle;
	}
	span{
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		font-size: .45rem;
		vertical-align: middle;
		&.yellow{
			background: linear-gradient(#feff88 6%, #ffb404 100%);
			-webkit-background-clip: text;
		}
		&.orange{
			background: linear-gradient(#ff721f 6%, #ff0404 100%);
			-webkit-background-clip: text;
		}
	}
}
</style>